<template>
  <base-modal :width="modAlProps.width" :isVisible="props.isVisible" :title="modAlProps.title" :buttons="buttons"
    :cancleText="'关闭'" @handleCancle="handleCancle" class="sort_model">
    <template v-slot:body>
      <div class="version_modelBox" id="version_modelBox">
        <div class="btnBox">
          <a-button type="primary" @click="addcorrelationRecord">添加</a-button>
        </div>
        <treeTable :columns="columns.correlationColumn" :dataSource="resData.records" :isSelect="true"
          :scroll="{ y: 300 }" ref="tagBaseTables" :isShowPagination="isShowPagination" :showCheckDelete="showCheckDelete"
          :total="resData.total" @changePage="changePage">
          <template #bodyCell="{ column, text, record, index }">
            <template v-if="column.dataIndex === 'num'">
              <span>{{ index + 1 }}</span>
            </template>
            <template v-if="column.ellipsis">
              <table-tool-tip :text="text" :column="column"></table-tool-tip>
            </template>

            <template v-if="column.dataIndex === 'oparation'">
              <div class="oparations">
                <a class="eidtRecords eidtRecords1" v-show="index != 0"
                  @click="sortHandle(true, record.id, resData.records[index - 1].id)">上移</a>
                <a-popconfirm placement="topRight" ok-text="确定" cancel-text="取消" @confirm="deleteItem([record.id])">
                  <template #title>
                    <p style="width: 197px">是否删除此内容，删除后不可恢复</p>
                  </template>
                  <a class="eidtRecords eidtRecords2">删除</a>
                </a-popconfirm>
                <!-- <a class="eidtRecords eidtRecords2"> 删除</a> -->
                <a class="eidtRecords eidtRecords2" v-show="resData.records.length != index + 1"
                  @click="sortHandle(false, record.id, resData.records[index + 1].id)">下移</a>
              </div>
            </template>
          </template>
          <template #otherOpration>
            <a-button :style="{ 'margin-left': '8px' }" @click="deleteSelectedAll"
              :disabled="!rowSelection.length">删除</a-button>
          </template>
        </treeTable>
      </div>
      <addCorrelation v-if="isAddCorrelationVisible" :isVisible="isAddCorrelationVisible" :contentId="props.contentId"
        @handleOk="handleOk" @handleCancle="isAddCorrelationVisible = false"></addCorrelation>
    </template>
  </base-modal>
</template>

<script lang="ts" setup>
import {
  ref,
  reactive,
  nextTick,
  onMounted,
  defineComponent,
  createVNode,
  watch,
  computed,
} from "vue";
import baseModal from "@/components/modal/baseModal.vue";
import treeTable from "@/components/table/baseTable.vue";
import columns from "@/components/table/tableConfig/tableColumn/contentManageColumn";
import tableToolTip from "@/components/table/tableToolTip.vue";

import addCorrelation from "./addCorrelation.vue";
import { scrollType } from "@/type.d";
import { getTableScroll } from "@/components/table/tableConfig/table";
import { dataSourceType, detailDataItemType } from "@/type";
import request from "@/api/index";
import getters from "@/store/getters";
import { Modal, message } from "ant-design-vue";

const props = defineProps({
  isVisible: {
    type: Boolean,
    default: false,
  },
  contentId: {
    type: Number,
    default: null,
  },
});
type configDataType = {
  total: number;
  size: number;
  records: any[];
};
//表格数据
let resData = reactive<configDataType>({ total: 0, size: 10, records: [] });
//模态框数据
const modAlProps = reactive<dataSourceType>({
  width: "L",
  title: "相关内容",
});

const isShowPagination = ref<boolean>(true); // 是否需要配分页器
const showCheckDelete = true; // 是否需要分页器中的自定义
const isAddCorrelationVisible = ref<boolean>(false);

const tagBaseTables = ref<any>(null);
const formState = ref<dataSourceType>({});
const upOrgOptions = ref([]); //栏目树数据
let siteId = getters.userInfo().siteId;
const sortOptions = ref<dataSourceType>([]);
let rowSelection = ref<(string | number)[]>([]);
let sortparams = ref<dataSourceType>({
  //头部筛选请求参数格式
  contentId: props.contentId,
  pageNumber: 1,
  pageSize: 50,
});
//获取栏目层级树列表
const fetchChannelListBySiteId = async () => {
  let params = {
    allPermFilter: true,
    siteId: siteId,
  };
  upOrgOptions.value = await request.fetchChannelListBySiteId(params);
};
//模态框button按钮个数和文案修改
// computed
rowSelection = computed(() => {
  return tagBaseTables.value.selectedRowKeys;
});
let buttons = ref<dataSourceType[]>([
  // {
  //   text: "确定",
  //   "html-type": "submit",
  //   keepAlive: true,
  // },
]);
// 相关内容
const addcorrelationRecord = () => {
  isAddCorrelationVisible.value = true;
};

// 删除多个
const deleteSelectedAll = async (item: any) => {
  console.log(item, "iten");
  Modal.confirm({
    content: "您确定删除所选内容吗？删除后不可恢复！",
    centered: true,
    icon: createVNode("i", {
      class: "iconfont icon-warn warning_ICON",
    }),
    cancelText: "取消",
    okText: "确定",
    onOk: async () => {
      deleteItem(tagBaseTables.value.selectedRowKeys);
    },
    onCancel() { },
  });
};
const deleteItem = (data: any) => {
  // 取消置顶;
  request
    .fetchContentRelationDelete({ ids: data })
    .then((res: any) => {
      if (res.code == "00000 00000") {
        message.success(res.message);
        fetchContentRelationPage();
      } else {
        message.error(res.message);
      }
    })
    .catch((err: any) => {
      throw new Error(err);
    });
};
// 排序
const sortHandle = (isBefore: any, id: any, toId: any) => {
  let params = {
    isBefore: isBefore,
    id: id,
    toId: toId,
  };
  request
    .fetchContentRelationSort(params)
    .then((res: any) => {
      if (res.code == "00000 00000") {
        fetchContentRelationPage();
        // handleOk();
        message.success(res.message);
      } else {
        message.error(res.message);
      }
    })
    .catch((err: any) => {
      throw new Error(err);
    });
};
const emits = defineEmits(["handleOk", "handleCancle"]);
const changePage = (data: { pageCurrent: any; pageSize: any }) => {
  sortparams.value.pageNumber = data.pageCurrent;
  sortparams.value.pageSize = data.pageSize;

  fetchContentRelationPage();
};
const handleOk = () => {
  fetchContentRelationPage();
  isAddCorrelationVisible.value = false;
};

const handleCancle = (e: MouseEvent) => {
  emits("handleCancle", e);
};

const fetchContentRelationPage = async () => {
  let data = await request.fetchContentRelationPage(sortparams.value);
  resData.total = data.total;
  resData.size = data.size;
  resData.records = data.records;
  tagBaseTables.value.selectedRowKeys = [];
};
onMounted(async () => {
  fetchContentRelationPage();
});
</script>

<style lang="less" scoped>
.sort_model {
  height: 100%;
  overflow: hidden;

  .AtreeSelect {
    margin-left: 12px;
    width: 280px;
  }

  .taskbj {
    width: 176px;
    margin-left: 24px;

    // display: flex;
    // align-items: center;
    .selectLable {
      width: 32px;
      height: 14px;
      font-size: 14px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.85);
      line-height: 14px;
    }

    .ant-select {
      width: 132px;
      margin-left: 12px;
    }
  }

  .version_modelBox {

    // height: 493px;
    // overflow-y: auto;
    // position: relative;
    .btnBox {
      display: flex;
      align-items: center;
      margin-bottom: 24px;

      i {
        margin-left: 8px;
        color: rgba(0, 0, 0, 0.45);
      }
    }
  }

  .addButton {
    display: flex;
    align-items: center;

    .iconadd {
      font-size: 24px;
      margin-right: 4px;
    }
  }

  .eidtRecords {
    // margin-right: 16px;
    width: 28px;
  }

  .eidtRecords:last-child {
    margin-right: 0;
  }

  .oparations {

    // display: flex;
    // justify-content: space-between;
    // text-align: cen;
    // dis
    .eidtRecords1 {
      float: left;
    }

    .eidtRecords2 {
      margin-left: 16px;
      float: right;
    }
  }
}
</style>
